<template>
  <div class="choose-list">
    <div class="nav-bar-wrap">
      <van-nav-bar  title="预约会议" left-text="返回"  left-arrow @click-left="onClickLeft" />
    </div>
    <van-cell-group class="search-box">
      <van-search placeholder="搜索成员..部门" v-model="searchValue" />
    </van-cell-group>
    <van-cell-group>
      <div v-for="(item,index) in result" :key="index">
        <div class="van-cell hairline van-hairline" v-if="item.isPerson">
          <div class="title-wrap">
            <van-checkbox v-model="item.checked"></van-checkbox>
          </div>
          <div class="mid-wrap" @click="choosePerson(item, index)">
            <span class="img-wrap" :style='`background-image:url(${item.url})`'></span>
            <span class="van-cell-text name-wrap">{{item.name}}</span>
          </div>
          <div class="status" @click="choosePerson(item, index)">
            <span>{{item.status}}</span>
          </div>
        </div>
        <div class="van-cell van-hairline" v-if="!item.isPerson">
          <div class="title-wrap">
            <van-checkbox v-model="item.checked"></van-checkbox>
          </div>
          <div class="mid-wrap" @click="goNext(item, index)">
            <span class="img-wrap" :style='`background-image:url(${item.url})`'></span>
            <span class="van-cell-text name-wrap">{{item.name}}</span>
          </div>
          <div class="status" @click="goNext(item, index)">
            <i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--right"></i>
          </div>
        </div>
      </div>
    </van-cell-group>
    <van-submit-bar button-text="提交" @submit="onSubmit">
      <span class="choose-tips">已选择{{peopleLength}}人,其中{{groupLength}}个部门</span>
    </van-submit-bar>
  </div>
</template>

<script>
import api from '../../api/meeting.api.js'
import {
  Search,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Card,
  icon,
  Row,
  Col,
  Toast,
  NavBar,
  SubmitBar
} from 'vant'
export default {
  components: {
    [Search.name]: Search,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [icon.name]: icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [Toast.name]: Toast,
    [SubmitBar.name]: SubmitBar,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      peopleLength:0,
      groupLength:0,
      checked: false,
      checked3: false,
      checked4: false,
      searchValue: '',
      result: [
        {
          name: '张三',
          checked: false,
          isPerson: true,
          url:
            'https://oic74zs8j.qnssl.com//score/activity/de600f2b9fbcd706453227fd4fc6e337.png',
          status: '会议中'
        },
        {
          name: '李四',
          checked: false,
          isPerson: true,
          url:
            'https://oic74zs8j.qnssl.com//score/activity/de600f2b9fbcd706453227fd4fc6e337.png',
          status: '离线'
        },
        {
          name: '研发部分',
          checked: false,
          isPerson: false,
          url:
            'https://oic74zs8j.qnssl.com//score/activity/de600f2b9fbcd706453227fd4fc6e337.png',
          status: ''
        }
      ]
    }
  },
  watch: {
    result: {
      handler: function(val, oldVal) {
        console.log('更新了')
        this.computeLength(val)
      },
      deep: true
    }
  },
  methods: {
    onClickLeft(){
     this.$router.go(-1)
    },
    computeLength(list){
      this.peopleLength = 0
      this.groupLength = 0
      list.forEach(ele => {
        if(ele.checked){
            if(ele.isPerson){
              //TODO
            }else{
              this.groupLength++
            }
        }
      });
    },
    goNext(item, index) {
      Toast('跳转')
    },
    choosePerson(item, index) {
      this.result[index].checked = !this.result[index].checked
    },
    onSubmit() {}
  }
}
</script>

<style scoped lang='less'>
.choose-list {
  .search-box{
   margin-top:48px
  }
  .choose-tips {
    color: #3580e7;
    font-size: 14px;
    padding: 0 0 0 10px;
  }
  .title-wrap {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .mid-wrap {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    padding-left:10px; 
  }
  .status {
    text-align: right;
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    span {
      color: #939398;
    }
  }

  .check-wrap {
    display: inline-block;
    width: 40px;
    text-align: center;
  }
  .name-wrap {
    padding-left: 15px;
  }
  .img-wrap {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
  }
  .card-goods {
  }
}
</style>